import { Form, Input, Checkbox, Row, Button, Tag } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import config from '@/utils/config'
import { generateaAlgorithm } from '@/utils'
const { addition } = config
generateaAlgorithm({
    digitL: addition.digitL,
    digitR: addition.digitR,
    time: addition.time,
    current: addition.current,
    type: 1
})
const Addition = defineComponent({
    setup() {
        const formState = reactive({
            digitL: addition.digitL,
            digitR: addition.digitR,
            time: addition.time,
            current: addition.current
        });
        const slots = (type: string) => ({
            addonBefore: () => <div class="clear">-</div>,
            addonAfter: () => <div class="add">+</div>
        })
        return () => (
            <Row class="set-item">
                <Row align="middle" justify="space-between">
                    <Checkbox value={1}>加法</Checkbox>
                    <Form.Item
                        label="位数"
                        name="title"
                    >
                        <Input type="number" v-model={[formState.digitL, "value"]} v-slots={slots('additionL')} />
                        <Input type="number" v-model={[formState.digitR, "value"]} v-slots={slots('additionR')} />
                    </Form.Item>
                    <Form.Item
                        label="随机"
                        name="title"
                    >
                        <Input type="number" style={{ marginRight: '20px' }} v-model={[formState.time, "value"]} />
                        <Input type="number" v-model={[formState.current, "value"]} />
                    </Form.Item>
                </Row>
                {/*   <Row align="middle" justify="space-between" class="set-item-cont">
                    <Tag closable color="#108ee9">加法</Tag>
                    <Form.Item
                        label=""
                        name="title"
                        class="item-cont-desc"
                    >
                        <Input type="number" v-model={[formState.additionL, "value"]} />
                        <span class="ant-input-group-addon"><div class="add">+</div></span>
                        <Input type="number" v-model={[formState.additionR, "value"]} />
                    </Form.Item>
                    <Form.Item
                        label="固定"
                        name="title"
                    >
                        <Input type="number" style={{ marginRight: '20px' }} v-model={[formState.additionL, "value"]} />
                        <Input type="number" v-model={[formState.additionR, "value"]} />
                    </Form.Item>
                </Row> */}
                <Button class="add-btn">............</Button>
            </Row>
        );
    },
});
export default Addition;
